<template>
<div class="orderDetails">
  <table class="order">
    <h2>订单详情</h2>
    <tr>
      <td>订单id</td>
      <td>{{orderdata.id}}</td>
    </tr>
    <tr>
      <td>会员名称</td>
      <td>{{orderdata.user_name}}</td>
    </tr>
    <tr>
      <td>地址</td>
      <td>{{orderdata.area}}</td>
    </tr>
    <tr>
      <td>快递</td>
      <td>{{orderdata.expressTitle}}</td>
    </tr>
    <tr>
      <td>状态</td>
      <td>{{orderstatus}}</td>
    </tr>
    <tr>
      <td>购买时间</td>
      <td>{{orderdata.express_time}}</td>
    </tr>
  </table>
  <h2>订单列表页面</h2>
  <table class="goods" @click="getgoods">
      <th>
          <td>商品</td>
          <span>类型</span>
          <td>价格</td>
      </th>
      <tr>
          <td>
              <div class="img">
                  <img :src="goodsData.imgurl" alt="">
              </div>
              <span>{{goodsData.goods_title}}</span>
          </td>
          <span>{{goodsData.goods_no}}</span>
          <td>{{goodsData.real_price}}</td>
      </tr>
  </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orderdata: {
        id: 0,
        user_name: "",
        area: "",
        status: 1,
        expressTitle: "",
        express_time: ""
      },
      statusNames: [
        { statusId: 1, statusNew: "待付款" },
        { statusId: 2, statusNew: "已付款" },
        { statusId: 3, statusNew: "已发货" },
        { statusId: 4, statusNew: "已签收" },
        { statusId: 5, statusNew: "已取消" }
      ],
      goodsData:{}
    };
  },
  computed:{
        orderstatus(){
            let num = 0
            num = this.statusNames[this.orderdata.status - 1].statusNew
                return num
           
        }
  },
  mounted() {
    this.$axios({
      url: `/admin/order/getorderdetial/${this.$route.params.ids}`
    }).then(res => {
      this.orderdata = res.data.message.orderinfo;
      this.goodsData =  res.data.message.goodslist[0]
    });
  },
  methods:{
      getgoods(){
          this.$router.push('/admin/goods-list')
      }
  }
};
</script>

<style>
body,html,#app{
    height: 100%;
}
.orderDetails {
  padding: 20px;
  height: 100%;
}

table{
    margin: 10px 0;
}
.order tr {
  height: 30px;
  padding-bottom: 15px;
  padding: 10px;
}
.order tr > td:nth-of-type(1) {
  width: 90px;
}
.order tr > td {
  font-size: 16px;
}
.goods{
    background-color: #fff;
    width: 100%;

}
.goods > th{
    display: flex;
    text-align: left;
    height: 50px;
    line-height: 30px;
    font-size: 14px;
    padding: 10px;
    border-bottom: 1px solid #ccc;
}
.goods > th>td{
    flex: 1;
}
.goods > th>span{
    width: 170px;
}
.goods > tr{
    padding: 10px;
    display: flex;
    text-align: left;
    font-size: 16px;
    line-height: 65px;
    cursor:pointer
}
.goods > tr>td{
    flex: 1;
    overflow: hidden;
    height: 70px;
    display: flex;
    
}
.goods > tr>span{
    width: 170px;
}
.img{
    width: 80px;
    height: 80px;
    flex-shrink:0;
    display: flex;
}
.goods > tr>td img{
    height: 65px;
    display: block;
    
}
.goods > tr>td>span{
    display: block;
    float: left;
    margin-left: 15px;
    line-height: 65px;
    text-overflow:ellipsis;
     white-space: nowrap;
     overflow: hidden;
}
</style>
